import type { TableColumnProps, ProSaasTableExposeType } from '~/components/ProSaasTable/typings'
import type { ExecutionLogPropsType, ExecutionLogDataItemType } from './typings'
import { defineComponent, reactive, ref, onMounted, nextTick } from 'vue'
import { useStore } from 'vuex'
import { ElDialog, ElFormItem, ElDatePicker } from 'element-plus'
import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
import ProSaasTable from '~/components/ProSaasTable'
import ColorfulBadge from '~/components/ColorfulBadge'
import useVuexGetters from '~/hooks/useVuexGetters'
import { MODAL_NORMAL_WIDTH } from '~/utils/const'

dayjs.extend(duration)

export default defineComponent({
  name: 'ExecutionLogModal',
  props: ['detail', 'doClose'],
  setup(props: ExecutionLogPropsType) {
    const store = useStore()
    const proSaasTableRef = ref<ProSaasTableExposeType>()
    const formValues = reactive<ExecutionLogDataItemType>({})
    const switchLightStrategyState = useVuexGetters('switchLightStrategy', [
      'performActionEnum',
      'taskTypeEnum'
    ])
    const deviceApplicationState = useVuexGetters('deviceApplication', [
      'execTypeSelectList',
      'execTypeEnum',
      'runStateSelectList',
      'runStateEnum'
    ])

    onMounted(() => {
      if (!deviceApplicationState.execTypeSelectList.value?.length)
        store.dispatch('deviceApplication/GetExecTypeSelectList')

      if (!deviceApplicationState.runStateSelectList.value?.length)
        store.dispatch('deviceApplication/GetRunStateSelectList')

      nextTick(() => {
        formValues.searchTime = [
          dayjs().subtract(2, 'years').format('YYYY-MM-DD'),
          dayjs().format('YYYY-MM-DD')
        ]
        nextTick(proSaasTableRef.value?.toSearch)
      })
    })

    const columns: TableColumnProps<ExecutionLogDataItemType>[] = [
      {
        label: '执行日期',
        prop: 'execDate',
        minWidth: 170,
        sortable: true
      },
      {
        label: '执行时间',
        prop: 'execTime',
        minWidth: 170
      },
      {
        label: '执行方式',
        prop: 'execType',
        minWidth: 170,
        enumValues: deviceApplicationState.execTypeEnum
      },
      {
        label: '执行结果',
        prop: 'runState',
        minWidth: 170,
        enumValues: deviceApplicationState.runStateEnum,
        render: (option, value) => (
          <ColorfulBadge
            value={value}
            enumKey={option.row.runState!}
            options={{ info: 3, warning: 1, success: 2 }}
          />
        )
      },
      {
        label: '执行动作',
        prop: 'runType',
        minWidth: 170,
        enumValues: switchLightStrategyState.performActionEnum
      },
      {
        label: '任务类型',
        prop: 'taskType',
        minWidth: 170,
        enumValues: switchLightStrategyState.taskTypeEnum
      },
      {
        label: '任务名称',
        prop: 'taskName',
        minWidth: 170
      }
    ]

    return () => (
      <ElDialog
        width={MODAL_NORMAL_WIDTH}
        title="执行日志"
        modelValue={true}
        closeOnClickModal={false} // 点遮罩层不关弹窗
        draggable // 可拖拽
        beforeClose={props?.doClose}
      >
        <ProSaasTable<ExecutionLogDataItemType>
          ref={proSaasTableRef}
          columns={columns}
          rowKey="id"
          defaultSort={{ prop: 'execDate', order: 'descending' }}
          dispatchType="deviceApplication/GetExecutionLogList"
          useGridLayout={false}
          noInitSearch
          searchParams={{
            groupLoopId: props?.detail?.id,
            searchTime: undefined,
            beginTime: formValues.searchTime?.length === 2 ? formValues.searchTime[0] : undefined,
            endTime: formValues.searchTime?.length === 2 ? formValues.searchTime[1] : undefined
          }}
          searchFormProps={{
            model: formValues
          }}
          searchformResponsiveCol={[
            <ElFormItem key="searchTime" prop="searchTime">
              <ElDatePicker
                type="daterange"
                v-model={formValues.searchTime}
                valueFormat="YYYY-MM-DD"
              />
            </ElFormItem>
          ]}
        />
      </ElDialog>
    )
  }
})
